<template>
  <div class="pie" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: 'PieCharts',
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (objs, index) {
            let obj = objs[0];
            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value}%`;
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          data: [0, 20, 40, 60, 80, 100],
          interval: 20,
          min: 0,
          max: 100,
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              type: 'dashed',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)',
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          boundaryGap: true,
          splitArea: {
            areaStyle: {
              opacity: 0,
            },
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: 12,
              fontWeight: 'normal',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)',
            },
          },
          data: ['催缴', '未缴', '退款', '实收', '应收'],
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              width: 1,
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: 'Scoring Attributes',
            barMaxWidth: 20,
            type: 'bar',
            label: {
              normal: {
                textStyle: {
                  color: '#fff',
                  fontWeight: 'bold',
                },
                show: true,
                position: 'right',
                formatter: '{c}',
              },
            },
            itemStyle: {
              color: function (params) {
                // 定义一组颜色
                var colorList = [
                  '#04f9eb',
                  '#fac858',
                  '#ec3b58',
                  '#91cc75',
                  '#5470c6',
                ];
                return colorList[params.dataIndex];
              },
            },
            data: [20, 30, 50, 78, 65],
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.pie {
  top: 0rem;
  left: 0;
  width: 95%;
  height: 1.0938rem;
  padding: 0rem 0.0521rem;
}
</style>
